<template>
  <button @click="onClick">开启图片编辑</button>
  <chj-imgEdit 
  ref="imgEdit" 
  :isAllCanvas="false"
  @confirm="confirm" 
  @cancel="cancel" 
  @getLineLength="getLineLength" 
  @getRectPosition="getRectPosition" 
  @error="error" />
	<image
		v-if="!!imgSrc"
		:src="imgSrc"
		mode="aspectFill"
		style="width: 100%;"
	/>
</template>

<script setup>
import {ref} from "vue";
const imgEdit = ref(null);
const imgSrc = ref('');
function onClick() {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			imgEdit.value.open({
				// 底图路径
				path: res.tempFilePaths[0],
				// 取消是否有弹窗提示
				isCancelToast: true,
				// 取消弹窗提示内容
				cancelText: '确定真的退出吗?',
				// 确定是否有弹窗提示
				isConfirmToast: true,
				// 确定弹窗提示内容
				confirmText: '决定好了吗?',
				// 设置图标
				iconPath: {
					goForward_active: '/static/goForward.png',
				},
				// 设置涂鸦图标（根据下标匹配）
				iconPathGraffiti: {
					0: '/static/iconPathGraffiti-1.png',
				},
				// 水印配置项
				watermarkConfig:{
					text:'水印',
					position: 'center',
					color:'#fff',
					x: 50,
					y: 50,
					size:20,
				}
			});
		}
	});
}
function confirm(res) {
	console.log('确认:',res);
	imgSrc.value = res;
}
function cancel() {
	console.log('取消');
}
function getLineLength(res) {
	console.log(res);
}
function getRectPosition(res) {
	console.log(res);
}
function error(res) {
	console.log(res);
}
</script>